<%--
  Created by IntelliJ IDEA.
  User: admin
  Date: 2022/9/20
  Time: 11:36
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=utf-8"
         pageEncoding="utf-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <title>商品页面</title>

    <link href="AmazeUI-2.4.2/assets/css/admin.css" rel="stylesheet"
          type="text/css" />
    <link href="AmazeUI-2.4.2/assets/css/amazeui.css" rel="stylesheet"
          type="text/css" />
    <link href="basic/css/demo.css" rel="stylesheet" type="text/css" />
    <link type="text/css" href="css/optstyle.css" rel="stylesheet" />
    <link type="text/css" href="css/style.css" rel="stylesheet" />

    <script type="text/javascript" src="basic/js/jquery-1.7.min.js"></script>
    <script type="text/javascript" src="basic/js/quick_links.js"></script>

    <script type="text/javascript" src="AmazeUI-2.4.2/assets/js/amazeui.js"></script>
    <script type="text/javascript" src="js/jquery.imagezoom.min.js"></script>
    <script type="text/javascript" src="js/jquery.flexslider.js"></script>
    <script type="text/javascript" src="js/list.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#add").click(function () {
                // 获取当前商品的库存
                var stock = "${requestScope.product.stock}";
                // 获取用户选择的数量
                var num = parseInt($("#productNum").val());
                // 判断
                if (num < stock) {
                    $("#productNum").val(++num);
                } else {
                    alert("您购买的数量超过库存了");
                }
            });


            $("#min").click(function () {
                var num = parseInt($("#productNum").val());
                // 判断
                if (num > 1) {
                    $("#productNum").val(--num);
                } else {
                    alert("至少买一个");
                }
            });

            $("#addCar").click(function () {
                var num = $("#productNum").val();
                var pid = "${param.id}"; // param是EL表达式的内置对象，param来获取传参数
                console.log(num, pid);

                var param = new Object();
                param.pid = pid;
                param.num = num;

                // 使用异步发送请求，携带数据过去
                $.ajax({
                    url: "CarController/addCar",
                    type: "POST",
                    dataType: "JSON",
                    contentType: "application/json",
                    data: JSON.stringify(param),
                    success: function (data) {
                        console.log("data", data);
                        if (data.code == 100) {
                            alert(data.msg);
                        } else if (data.code == 200) {
                            location.reload();
                        }
                    }
                });

            });

        })
    </script>
</head>

<body>


<!--顶部导航条 -->
<jsp:include page="head.jsp"></jsp:include>

<div class="clear"></div>
<b class="line"></b>
<div class="listMain">

    <!--分类-->
    <div class="nav-table">
        <div class="long-title">
            <span class="all-goods">全部分类</span>
        </div>
        <div class="nav-cont">
            <ul>
                <li class="index"><a href="#">首页</a></li>
                <li class="qc"><a href="#">闪购</a></li>
                <li class="qc"><a href="#">限时抢</a></li>
                <li class="qc"><a href="#">团购</a></li>
                <li class="qc last"><a href="#">大包装</a></li>
            </ul>
            <div class="nav-extra">
                <i class="am-icon-user-secret am-icon-md nav-user"></i><b></b>我的福利
                <i class="am-icon-angle-right" style="padding-left: 10px;"></i>
            </div>
        </div>
    </div>
    <ol class="am-breadcrumb am-breadcrumb-slash">
        <li><a href="#">首页</a></li>
        <li><a href="#">分类</a></li>
        <li class="am-active">内容</li>
    </ol>
    <script type="text/javascript">
        $(function() {});
        $(window).load(function() {
            $('.flexslider').flexslider({
                animation: "slide",
                start: function(slider) {
                    $('body').removeClass('loading');
                }
            });
        });
    </script>

    <!--放大镜-->

    <div class="item-inform">
        <div class="clearfixLeft" id="clearcontent">

            <div class="box">
                <script type="text/javascript">
                    $(document).ready(function() {
                        $(".jqzoom").imagezoom();
                        $("#thumblist li a").click(function() {
                            $(this).parents("li").addClass("tb-selected").siblings().removeClass("tb-selected");
                            $(".jqzoom").attr('src', $(this).find("img").attr("mid"));
                            $(".jqzoom").attr('rel', $(this).find("img").attr("big"));
                        });
                    });
                </script>

                <div class="tb-booth tb-pic tb-s310">
                    <a href="#"><img src="images/${goodsInfo.goods_pic}"
                                     style="width: 350px; height: 350px" alt="细节展示放大镜特效" rel=""
                                     class="jqzoom" /></a>
                </div>

            </div>

            <div class="clear"></div>
        </div>

        <div class="clearfixRight">

            <!--规格属性-->

            <div class="tb-detail-hd">
                <h1>商品名称</h1><!--名称-->
            </div>
            <div class="tb-detail-list">
                <!--价格-->
                <div class="tb-detail-price">

                    <li class="price iteminfo_price">
                        <dt>促销价</dt>
                        <dd>
                            <em>¥</em><b class="sys_item_price">12</b>
                        </dd>
                    </li>
                    <li class="price iteminfo_mktprice">
                        <dt>原价</dt>
                        <dd>
                            <em>¥</em><b class="sys_item_mktprice">22</b>
                        </dd>
                    </li>
                    <div class="clear"></div>
                </div>


                <!--销量-->
                <ul class="tm-ind-panel">
                    <li class="tm-ind-item tm-ind-sellCount canClick">
                        <div class="tm-indcon">
                            <span class="tm-label">月销量</span><span class="tm-count">1015</span>
                        </div>
                    </li>
                    <li class="tm-ind-item tm-ind-sumCount canClick">
                        <div class="tm-indcon">
                            <span class="tm-label">累计销量</span><span class="tm-count">6015</span>
                        </div>
                    </li>
                    <li class="tm-ind-item tm-ind-reviewCount canClick tm-line3">
                        <div class="tm-indcon">
                            <span class="tm-label">累计评价</span><span class="tm-count">640</span>
                        </div>
                    </li>
                </ul>
                <div class="clear"></div>

                <!--各种规格-->
                <dl class="iteminfo_parameter sys_item_specpara">
                    <dt class="theme-login">
                        <div class="cart-title">
                            可选规格<span class="am-icon-angle-right"></span>
                        </div>
                    </dt>
                    <dd>
                        <!--操作页面-->

                        <div class="theme-popover-mask"></div>

                        <div class="theme-popover">
                            <div class="theme-span"></div>
                            <div class="theme-poptit">
                                <a href="javascript:;" title="关闭" class="close">×</a>
                            </div>
                            <div class="theme-popbod dform">
                                <form class="theme-signin" action="" method="post">

                                    <div class="theme-signin-left">


                                        <div class="theme-options">
                                            <div class="cart-title number">数量</div>
                    <dd>
                        <input id="min" class="am-btn am-btn-default" name="" type="button" value="-" />
                        <input id="value" name="pic" type="text" value="1" style="width: 30px;" />
                        <input id="add" class="am-btn am-btn-default" name="" type="button" value="+" />
                        <span id="Stock" class="tb-hidden">库存
													<span class="stock" id="stock">12</span>件
													</span>
                    </dd>

            </div>
            <div class="clear"></div>

            <div class="btn-op">
                <div class="btn am-btn am-btn-warning">确认</div>
                <div class="btn close am-btn am-btn-warning">取消</div>
            </div>
        </div>
        <div class="theme-signin-right">
            <div class="img-info">
                <img src="images/songzi.jpg" />
            </div>
            <div class="text-info">
                <span class="J_Price price-now">¥39.00</span> <span
                    id="Stock" class="tb-hidden">库存<span class="stock">1000</span>件
												</span>
            </div>
        </div>

        </form>
    </div>
</div>

</dd>
</dl>
<div class="clear"></div>
<!--活动	-->
<div class="shopPromotion gold">
    <div class="hot">
        <dt class="tb-metatit">店铺优惠</dt>
        <div class="gold-list">
            <p>
                购物满2件打8折，满3件7折</span>
            </p>
        </div>
    </div>
    <div class="clear"></div>
    <div class="coupon">
        <dt class="tb-metatit">优惠券</dt>
        <div class="gold-list">
            <ul>
                <li>125减5</li>
                <li>198减10</li>
                <li>298减20</li>
            </ul>
        </div>
    </div>
</div>
</div>

<div class="pay">
    <div class="pay-opt">
        <a href="home.html"><span class="am-icon-home am-icon-fw">首页</span></a>
        <a><span class="am-icon-heart am-icon-fw">收藏</span></a>

    </div>
    <li>
        <div class="clearfix tb-btn tb-btn-buy theme-login">
            <a id="buy" title="点此按钮到下一步确认购买信息"  href="#">立即购买</a>
        </div>
    </li>
    <li>
        <div class="clearfix tb-btn tb-btn-basket theme-login">
            <a id="LikBasket" title="加入购物车" href="#"><i></i>加入购物车</a>
        </div>
    </li>
</div>

</div>

<div class="clear"></div>

</div>


<div class="footer">
    <div class="footer-hd">
        <p>
            <a href="#">恒望科技</a> <b>|</b> <a href="#">商城首页</a> <b>|</b> <a
                href="#">支付宝</a> <b>|</b> <a href="#">物流</a>
        </p>
    </div>
    <div class="footer-bd">
        <p>
            <a href="#">关于恒望</a> <a href="#">合作伙伴</a> <a href="#">联系我们</a> <a
                href="#">网站地图</a> <em>© 2015-2025 Hengwang.com 版权所有</em>
        </p>
    </div>
</div>
</div>

</div>
</div>
<!--菜单 -->
<div class=tip>
    <div id="sidebar">
        <div id="wrap">
            <div id="prof" class="item">
                <a href="#"> <span class="setting"></span>
                </a>
                <div class="ibar_login_box status_login">
                    <div class="avatar_box">
                        <p class="avatar_imgbox">
                            <img src="images/no-img_mid_.jpg" />
                        </p>
                        <ul class="user_info">
                            <li>用户名：sl1903</li>
                            <li>级&nbsp;别：普通会员</li>
                        </ul>
                    </div>
                    <div class="login_btnbox">
                        <a href="#" class="login_order">我的订单</a> <a href="#"
                                                                    class="login_favorite">我的收藏</a>
                    </div>
                    <i class="icon_arrow_white"></i>
                </div>

            </div>
            <div id="shopCart" class="item">
                <a href="#"> <span class="message"></span>
                </a>
                <p>购物车</p>
                <p class="cart_num">0</p>
            </div>
            <div id="asset" class="item">
                <a href="#"> <span class="view"></span>
                </a>
                <div class="mp_tooltip">
                    我的资产 <i class="icon_arrow_right_black"></i>
                </div>
            </div>

            <div id="foot" class="item">
                <a href="#"> <span class="zuji"></span>
                </a>
                <div class="mp_tooltip">
                    我的足迹 <i class="icon_arrow_right_black"></i>
                </div>
            </div>

            <div id="brand" class="item">
                <a href="#"> <span class="wdsc"><img
                        src="images/wdsc.png" /></span>
                </a>
                <div class="mp_tooltip">
                    我的收藏 <i class="icon_arrow_right_black"></i>
                </div>
            </div>

            <div id="broadcast" class="item">
                <a href="#"> <span class="chongzhi"><img
                        src="images/chongzhi.png" /></span>
                </a>
                <div class="mp_tooltip">
                    我要充值 <i class="icon_arrow_right_black"></i>
                </div>
            </div>

            <div class="quick_toggle">
                <li class="qtitem"><a href="#"><span class="kfzx"></span></a>
                    <div class="mp_tooltip">
                        客服中心<i class="icon_arrow_right_black"></i>
                    </div></li>
                <!--二维码 -->
                <li class="qtitem"><a href="#none"><span
                        class="mpbtn_qrcode"></span></a>
                    <div class="mp_qrcode" style="display: none;">
                        <img src="images/weixin_code_145.png" /><i
                            class="icon_arrow_white"></i>
                    </div></li>
                <li class="qtitem"><a href="#top" class="return_top"><span
                        class="top"></span></a></li>
            </div>

            <!--回到顶部 -->
            <div id="quick_links_pop" class="quick_links_pop hide"></div>

        </div>

    </div>
    <div id="prof-content" class="nav-content">
        <div class="nav-con-close">
            <i class="am-icon-angle-right am-icon-fw"></i>
        </div>
        <div>我</div>
    </div>
    <div id="shopCart-content" class="nav-content">
        <div class="nav-con-close">
            <i class="am-icon-angle-right am-icon-fw"></i>
        </div>
        <div>购物车</div>
    </div>
    <div id="asset-content" class="nav-content">
        <div class="nav-con-close">
            <i class="am-icon-angle-right am-icon-fw"></i>
        </div>
        <div>资产</div>

        <div class="ia-head-list">
            <a href="#" target="_blank" class="pl">
                <div class="num">0</div>
                <div class="text">优惠券</div>
            </a> <a href="#" target="_blank" class="pl">
            <div class="num">0</div>
            <div class="text">红包</div>
        </a> <a href="#" target="_blank" class="pl money">
            <div class="num">￥0</div>
            <div class="text">余额</div>
        </a>
        </div>

    </div>
    <div id="foot-content" class="nav-content">
        <div class="nav-con-close">
            <i class="am-icon-angle-right am-icon-fw"></i>
        </div>
        <div>足迹</div>
    </div>
    <div id="brand-content" class="nav-content">
        <div class="nav-con-close">
            <i class="am-icon-angle-right am-icon-fw"></i>
        </div>
        <div>收藏</div>
    </div>
    <div id="broadcast-content" class="nav-content">
        <div class="nav-con-close">
            <i class="am-icon-angle-right am-icon-fw"></i>
        </div>
        <div>充值</div>
    </div>
</div>

</body>

</html>
